import Base from '@/components/Base';
import {
  Button,
  Card,
  Form,
  Radio,
  Input,
  Badge,
  Select,
  Table,
  Modal,
  message,
  Popover,
} from 'antd';
import { KayButton } from '@/components/KayUI';
import styles from './index.less';
import { Configuration, OpenAIApi } from 'openai'; // https://platform.openai.com/docs/api-reference/authentication
import React from 'react';

import { TestCompA } from './components/compA';
import { TestCompB } from './components/compB';
import { TestContext } from './context';
import { RcProvider } from './reducerContext';

interface State {
  levelTxt: string;
}

export default class Index extends Base<any, State> {
  public state: State = {
    levelTxt: 'test',
  };
  private openai: OpenAIApi | null = null;

  public async didShow() {}

  public async didMount() {
    // console.log('history', this.navigator.history)

    const configuration = new Configuration({
      organization: 'org-g2YwI5D32zYTzvJOUA2FpbPx',
      apiKey: process.env.OPENAI_API_KEY,
    });
    this.openai = new OpenAIApi(configuration);
    const response = await this.openai.listEngines();
    console.log('test openai::', this.openai, response);
  }

  public render() {
    const { levelTxt } = this.state;
    return (
      <div style={{ flexDirection: 'row', alignItems: 'center' }}>
        <RcProvider>
          <TestContext.Provider
            value={{
              id: 2,
              level: levelTxt,
            }}
          >
            <h2>test页面</h2>
            <button
              onClick={() => {
                this.navigator.push('index');
              }}
            >
              回首页
            </button>
            <Button type="primary">自定义按钮</Button>
            <KayButton>Kay按钮</KayButton>
            <KayButton onClick={this.startCompletion}>测试OpenAI</KayButton>
            <div className={styles.mediaTest}></div>

            <Input
              onChange={(e) => {
                this.setState({
                  levelTxt: e.target.value,
                });
              }}
            />
            <React.Fragment>
              <TestCompA />
              <TestCompB />
            </React.Fragment>
          </TestContext.Provider>
        </RcProvider>
      </div>
    );
  }

  // private get httpsAgent() {
  //   const httpsAgent = this.openaiClient.getHttpsAgent();
  //   return httpsAgent;
  // }

  private startCompletion = async () => {
    if (this.openai) {
      const completion = await this.openai.createCompletion({
        model: 'text-davinci-003',
        prompt: this.generatePrompt(),
        max_tokens: 10,
        temperature: 0.6,
      });
      console.log('completion::', completion);
    }
  };

  private generatePrompt = () => {
    const capitalizedAnimal = 'Fish';
    return `Suggest three names for an animal that is a superhero.
  
    Animal: Cat
    Names: Captain Sharpclaw, Agent Fluffball, The Incredible Feline
    Animal: Dog
    Names: Ruff the Protector, Wonder Canine, Sir Barks-a-Lot
    Animal: ${capitalizedAnimal}
    Names:`;
  };
}

// export default function IndexPage() {
//   return (
//     <div>
//       <h1 className={styles.title}>Page index</h1>
//     </div>
//   );
// }
